<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>不同时间作品数</title>

    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小的 DOM 容器 -->
<div id="lineChart" style="width: 600px; height: 400px;"></div>

<script>
    // 创建 XMLHttpRequest 对象用于读取 CSV 文件
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '../output/mengBatch4.csv/part-00000-08448086-d9bb-4f7e-9e01-07674b7daf23-c000.csv', true);
    xhr.onload = function () {
        if (this.status === 200) {
            const csvData = this.responseText;
            // 解析 CSV 数据，处理可能的空格，避免数据干扰
            const rows = csvData.split('\n').map(row => row.split(',').map(item => item.trim()));
            const headers = rows[0];
            // 过滤有效数据行：确保5列完整 + 转化率为有效数字
            const dataRows = rows.slice(1).filter(row => row.length === 5 && !isNaN(parseFloat(row[4])));

            // 数据处理：按「来源渠道+性别」分组，提取关键信息
            const sourceSet = new Set(); // 收集所有来源渠道
            const sexSet = new Set(); // 收集所有性别类型
            const rateMap = new Map(); // 存储 {来源渠道: {性别: 转化率}}
            const userInfoMap = new Map(); // 存储详细用户数据，用于tooltip

            dataRows.forEach(row => {
                const source = row[0];
                const sex = row[1];
                const totalUser = parseInt(row[2]) || 0;
                const listingUser = parseInt(row[3]) || 0;
                const rate = parseFloat(row[4]).toFixed(2); // 转化率保留2位小数

                // 收集唯一维度
                sourceSet.add(source);
                sexSet.add(sex);

                // 存储转化率
                if (!rateMap.has(source)) rateMap.set(source, new Map());
                rateMap.get(source).set(sex, rate);

                // 存储详细用户信息，用于hover提示
                const key = `${source}-${sex}`;
                userInfoMap.set(key, { totalUser, listingUser });
            });

            // 转换为图表所需格式
            const sourceList = Array.from(sourceSet); // x轴：来源渠道列表
            const sexList = Array.from(sexSet); // 系列：性别列表
            // 构建系列数据：每个性别对应一组各渠道的转化率
            const seriesData = sexList.map(sex => {
                return {
                    name: sex,
                    type: 'bar',
                    data: sourceList.map(source => rateMap.get(source).get(sex) || 0)
                };
            });

            // 初始化 ECharts 实例
            const myChart = echarts.init(document.getElementById('lineChart'));

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '不同来源渠道下不同性别用户的浏览转化率',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' },
                    formatter: function(params) {
                        const source = sourceList[params[0].dataIndex];
                        let tipContent = `<b>${source}</b><br/>`;

                        params.forEach(item => {
                            const sex = item.seriesName;
                            const rate = item.value;
                            const key = `${source}-${sex}`;
                            const { totalUser, listingUser } = userInfoMap.get(key) || { totalUser: 0, listingUser: 0 };
                            tipContent += `${sex}：总用户${totalUser}人，列表页用户${listingUser}人，转化率${rate}%<br/>`;
                        });
                        return tipContent;
                    }
                },
                legend: {
                    data: sexList, // 图例：性别类型
                    top: 30,
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%', // 预留更多底部空间，避免x轴标签重叠
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: sourceList,
                    name: '来源渠道', // x轴名称：来源渠道
                    axisLabel: {
                        rotate: 45, // 旋转标签
                        interval: 0, // 显示所有渠道名称
                        fontSize: 11
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '列表页转化率', // y轴名称：列表页转化率
                    axisLabel: {
                        formatter: '{value}%' // 显示百分比符号
                    },
                    min: 0, // 转化率从0开始，确保对比公平
                    max: function(value) {
                        // 最大值设为实际最大值的1.2倍，留有余地
                        return Math.ceil(value.max * 1.2);
                    }
                },
                series: seriesData
            };

            // 使用配置项显示图表
            myChart.setOption(option);

            // 响应窗口大小变化，自动调整图表
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    };
    xhr.send();
</script>
</body>
</html>